
// 常用颜色表
$colors: (
	// 基本颜色
	'black': #000000,
	'white': #ffffff,
	'gray-dark': #333333,
	'gray': #666666,
	'gray-light': #999999,
	'light-gray': #cccccc,
	'white-smoke': #F5F5F5,
	'gainsboro': #DCDCDC,
	'silver': #C0C0C0,
	'dark-gray': #A9A9A9,
	'dim-gray': #696969,
	// 主要颜色
	'red': #ff0000,
	'green': #00ff00,
	'blue': #0000ff,
	'yellow': #ffff00,
	'cyan': #00ffff,
	'magenta': #ff00ff,
	// 中性色
	'dark-red': #8b0000,
	'dark-green': #006400,
	'dark-blue': #00008b,
	'dark-yellow': #ffd700,
	'dark-cyan': #008b8b,
	'dark-magenta': #8b008b,
	// 浅色调
	'light-red': #ff6666,
	'light-green': #66ff66,
	'light-blue': #6666ff,
	'light-yellow': #ffff66,
	'light-cyan': #66ffff,
	'light-magenta': #ff66ff,
	// 自定义颜色
	'primary': #007bff,
	'secondary': #6c757d,
	'success': #28a745,
	'danger': #dc3545,
	'warning': #ffc107,
	'info': #17a2b8,
	'light': #f8f9fa,
	'dark': #343a40
);
// ios底部安全区域
@mixin ios($num:0px) {
	padding-bottom: $num;
	padding-bottom: calc($num + constant(safe-area-inset-bottom)); /*兼容 IOuw<11.2*/
	padding-bottom: calc($num + env(safe-area-inset-bottom)); /*兼容 IOuw>11.2*/
}
// 背景颜色 
@mixin bgc($colors:#000,$opacity:1) {
	background-color: rgba($colors, $opacity) ;
}
// 定义一个基础的 flex mixin
@mixin flex-base {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  /* #ifdef APP-NVUE */
  flex-direction: row;
  /* #endif */
}
// 定义文本溢出省略 mixin
@mixin ellipsis-lines($lines) {
	
	/* #ifndef APP-NVUE */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: $lines;
	overflow: hidden;
	/* #endif */
	
	/* #ifdef APP-NVUE */
	text-overflow: ellipsis;
	lines: $lines;
	/* #endif */
	
}
// 边框宽度
$border-width: 1px;
$border-sides: (all, top, bottom, left, right);
// 生成边框类
@each $name, $color in $colors {
	// 示例： .uw-border-red-all
	@each $side in $border-sides {
		.uw-border-#{$name}-#{$side} {
			@if $side == all {
				border: $border-width solid $color;
			} @else {
				border-#{$side}: $border-width solid $color;
			}
		}
	}
}
// 使用颜色表生成 CSS 类
@each $name, $color in $colors {
	.uw-color-#{$name} {
		color: $color;
	}
	.uw-bg-#{$name} {
		background-color: $color;
	}
}
// 圆角属性1 - 100
@for $i from 1 through 100 {
	//使用示例 ：.uw-radius-10
	.uw-radius-#{$i} {
		border-radius: #{$i}px;
	}
}
// font-size 
@for $i from 10 through 100 {
	.uw-size-#{$i} {
		font-size: #{$i}px;
	}
}
// margin 和 padding
@for $i from 0 through 80 {
	
	// 如：uiuw-m10 (生成 margin: 10px)
	.uw-m#{$i} {
		margin: #{$i}px;
	}
	// 如：uw-m0-10 (生成 margin: 0 10px)
	.uw-m0-#{$i} {
		margin: 0 #{$i}px; // 水平为 $i，垂直为 0
	}
	// 如：uw-m10-0 (生成 margin: 10px 0)
	.uw-m#{$i}-0 {
		margin: #{$i}px 0; // 垂直为 $i，水平为 0
	}
	// 如：uw-p10 (生成 padding: 10px)
	.uw-p#{$i} {
		padding: #{$i}px;
	}
	// 如：uw-p0-10 (生成 padding: 0 10px)
	.uw-p0-#{$i} {
		padding: 0 #{$i}px;
	}
	// 如：uw-p10-0 (生成 padding: 10px 0)
	.uw-p#{$i}-0 {
		padding: #{$i}px 0;
	}
	@each $short, $long in l left, t top, r right, b bottom {
		//结果如： m-l-30
		.uw-m#{$short}-#{$i} {
			margin-#{$long}: #{$i}px;
		}
		//结果如： p-l-30
		.uw-p#{$short}-#{$i} {
			padding-#{$long}: #{$i}px;
		}
	}
	@for $j from 0 through 80 {
		.uw-m#{$i}-#{$j} {
			margin: #{$i}px #{$j}px;
		}
		.uw-p#{$i}-#{$j} {
			padding: #{$i}px #{$j}px;
		}
	}
}

// 字体粗细
@for $i from 100 through 900 {
	.uw-weight-#{$i} {
		font-weight: #{$i};
	}
}


// 布局类，简化调用
.uw-flex {
	@include flex-base;
}
// 换行
.uw-flex-wrap {
	@include flex-base;
	flex-wrap: wrap;
}
// 水平居中
.uw-flex-center {
	@include flex-base;
	justify-content: center;
	align-items: center;
}
// 水平两端对齐
.uw-flex-between {
	@include flex-base;
	justify-content: space-between;
	align-items: center;
}
// 两端对齐
.uw-flex-around {
	@include flex-base;
	justify-content: space-around;
}
// 垂直布局
.uw-flex-column {
	@include flex-base;
	flex-direction: column;
}
// 分配剩余空间
.uw-flex-1 {
	@include flex-base;
	flex: 1;
}
// 垂直居中
.uw-flex-center-y {
	@include flex-base;
	align-items: center;
}
// 水平居中
.uw-flex-center-x {
	@include flex-base;
	justify-content: center;
}
// 文本溢出处理 1-20 行
@for $i from 1 through 20 {
	// 如：uw-ellipsis-3
	.uw-ellipsis-#{$i} {
		@include ellipsis-lines($i);
	}
}
// 兼容 IOS 底部安全区域
.uw-ios{
	padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOuw<11.2*/
	padding-bottom: env(safe-area-inset-bottom); /*兼容 IOuw>11.2*/
}
.uw-radio{
	transform: scale(0.7);
}